<script setup>
// props: ['money']
// props:{
//     money: Number
// }
// props:{
//     money:{
//         type: Number,
//         default: 5000
//     }
// }

// defineProps 不需要引进，它是一个全局的宏方法
// 在 script 中使用 defineProps，需要先接收
// 在 template 要使用，会自动帮我们把 defineProps 的属性解构出来，直接使用
const props = defineProps({
  money: {
    type: Number,
    default: 5000,
  },
  car: {
    type: String,
    default: '五菱宏光',
  },
});
// console.log('props -----> ', props);

/* 
子传父:因为不能直接修改父组件传过来的数据
vue2: this.$emit('add',1000)
vue3中要接收 父组件传过来的方法，使用 defineEmits( [方法名1，方法名2...] )
*/
const emit = defineEmits(['add']);
const add = () => {
  emit('add', 2000);
};
</script>

<template>
  <h1>
    我是子组件 - {{ money }} - {{ car }}
    <div>
      <!-- 方法1，template中$emit已经挂载到this实例，可以直接使用 -->
      <button @click="$emit('add', 1000)">点我实现子传父</button>
      <!-- 方法2，通过 defineEmits( [方法名1，方法名2...] -->
      <button @click="add">点我实现子传父 - defineEmits</button>
    </div>
  </h1>
</template>
